<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改版二</title>
</head>
<body>
    <link rel="stylesheet" href="css/correcting.css">
    <link  href="css/swiper.min.css"  rel="stylesheet">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/echarts-gl.min.js"></script>
    <script type="text/javascript" src="js/ecStat.min.js"></script>
    <script type="text/javascript" src="js/dataTool.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/world.js"></script>
    <script type="text/javascript" src="js/bmap.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script src="https://cn.vuejs.org/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div class="bag" id="app">
        <div class="header">
            <div class="headerleft">
                <div class="left-one">
                    <img src="image/icons.png">
                </div>
                <div class="left-two">
                    <img src="image/icons2.png">
                </div>
                <div class="left-three">
                    <img src="image/icons3.png">
                </div>
            </div>
            <div class="headermiddle">
                <span>地心谷集控中心管理系统</span>
            </div>
            <div class="headerright">
                <span>2019/9/18 15:03 周三 多云转小雨</span>
            </div>
        </div>
        <div class="middle">
            <div class="middle-bag">
                <div class="middle-one">
                    <div class="one-one">
                        <h3>景区气象</h3>
                        <div class="iconsbag">
                            <div class="icons">
                                <div class="icon">
                                    <img src="image/sky.png">
                                </div>
                                <div class="icon">
                                    <img src="image/air.png">
                                </div>
                                <div class="icon">
                                    <img src="image/humidity.png">
                                </div>
                                <div class="icon">
                                    <img src="image/rainfall.png">
                                </div>
                                <div class="icon">
                                    <img src="image/pressure.png">
                                </div>
                            </div>
                            <div class="icons">
                                <div class="icon">
                                    <img src="image/beam.png">
                                </div>
                                <div class="icon">
                                    <img src="image/rays.png">
                                </div>
                                <div class="icon">
                                    <img src="image/noise.png">
                                </div>
                                <div class="icon">
                                    <img src="image/speed.png">
                                </div>
                                <div class="icon">
                                    <img src="image/direction.png">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="one-two">
                        <div class="pie">
                            <h3>智慧停车</h3>
                            <div class="pie1">
                                <div id="one" style="height: 230px; width: 230px;"></div>
                            </div>
                        </div>
                        <div class="pie">
                            <h3>票务系统</h3>
                            <div class="pie1">
                                <div id="two" style="height: 230px; width: 230px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="one-three">
                        <h2>危险预警</h2>
                        <div class="pie2">
                            <div id="three" style="height: 185px; width: 442px;"></div>
                        </div>
                        <div class="dangerous">
                            <div class="dangerous1">
                                <img src="image/dangerous.png">
                            </div>
                            <div class="dangerous2">
                                <h3>危岩预警</h3>
                                <h6>10号节点</h6>
                                <h6>17号节点</h6>
                            </div>
                            <div class="dangerous2">
                                <h3>河道预警</h3>
                                <h6>16号节点</h6>
                                <h6>29号节点</h6>
                            </div>
                            <div class="dangerous2">
                                <h3>电子围栏预警</h3>
                                <h6>1号节点</h6>
                                <h6>9号节点</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle-two">
                    <div class="top">
                        <div class="top1">
                            <div style="float: left;width: 210px">
                                <h6>本月游客总数（人次）</h6>
                                <p>120096</p>
                            </div>
                            <div style="float: left;width: 110px">
                                <h4>上月总数</h4>
                                <h5>116098</h5>
                            </div>
                        </div>
                        <div class="top1">
                            <div style="float: left;width: 210px">
                                <h6>本月收入总额（元）</h6>
                                <p>1801230</p>
                            </div>
                            <div style="float: left;width: 110px">
                                <h4>上月总数</h4>
                                <h5>1560982</h5>
                            </div>
                        </div>
                        <div class="top1">
                            <div style="float: left;width: 210px">
                                <h6>本月预警次数（次）</h6>
                                <p>130</p>
                            </div>
                            <div style="float: left;width: 110px">
                                <h4>上月总数</h4>
                                <h5>100</h5>
                            </div>
                        </div>
                    </div>
                    <div class="mid">
                        <div class="text">
                            <p style="padding-top:10px">游客数量200-500人</p>
                            <p>游客数量500-1000人</p>
                            <p>游客数量1000-1500人</p>
                        </div>
                    </div>
                    <div class="bom">
                        <div class="bom1">视频监控</div>
                        <div class="bom2">
                            <div class="float" style="padding-bottom: 10px">
                                <div class="float1">
                                    <img src="image/1.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px; margin-top: -25px">地心谷走廊1号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/2.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">停车场1号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/3.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">玻璃桥1号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/4.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">山顶1号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/5.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">舒心谷1号</div>
                                    </div>
                                </div>
                            </div>
                            <div class="float">
                                <div class="float1">
                                    <img src="image/6.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">地心谷走廊2号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/7.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">景区入口1号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/8.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">洗心谷2号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/9.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">洗心谷3号</div>
                                    </div>
                                </div>
                                <div class="float1">
                                    <img src="image/10.png">
                                    <div style="width: 189px; height: 20px; z-index: 2;margin-top: -22px">
                                        <img src="image/shadow.png">
                                        <div style="z-index: 3;color: white;font-size: 12px;margin-top: -25px">洗心谷4号</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle-three">
                    <div class="three-one">
                        <h3>游玩热度</h3>
                        <div class="lll">
                            <div id="four" style="width: 434px; height: 222px"></div>
                        </div>
                    </div>
                    <div class="three-two">
                        <div>
                            <h3>电子巡更</h3>
                            <h6>巡更点 &nbsp;&nbsp; 20处&nbsp;&nbsp;&nbsp;故障点&nbsp;&nbsp;  5处</h6>
                        </div>
                        <div class="beij">
                            <div style="width: 23px; height: 23px;z-index: 50;padding-top: 20px;padding-left: 40px">
                                <img src="image/blue.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 51;margin-top: -20px;padding-left: 80px">
                                <img src="image/blue.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 50;margin-top: -10px;padding-left: 110px">
                                <img src="image/blue.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 50;padding-top: 20px;padding-left: 180px">
                                <img src="image/blue.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 50;margin-top: 35px;padding-left: 240px">
                                <img src="image/blue.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 50;margin-top: -50px;padding-left: 260px">
                                <img src="image/red.png">
                            </div>
                            <div style="width: 23px; height: 23px;z-index: 50;padding-top: 40px;padding-left: 300px">
                                <img src="image/blue.png">
                            </div>
                        </div>
                    </div>
                    <div class="three-three">
                        <div style="width: 473px; height: 158px">
                            <div class="fd">
                                <div style="float:left; width: 150px">
                                    <img src="image/oval.png">
                                </div>
                                <div style="float: left;margin-top: 20px">
                                    <img src="image/efficacy.png">
                                </div>
                                <div style="float: left;width: 30px;padding-top: 15px;padding-left: 15px;font-size: 24px; color:#00ccff;">
                                    人脸识别
                                </div>
                            </div>
                            <div class="fd">
                                <div style="float:left; width: 150px;padding-top: 20px">
                                    <img src="image/airing.png">
                                </div>
                                <div style="float: left;margin-top: 20px">
                                    <img src="image/efficacy.png">
                                </div>
                                <div style="float: left;width: 30px;padding-top: 15px;padding-left: 15px;font-size: 24px; color:#00ccff;">
                                    智能广播
                                </div>
                            </div>
                        </div>
                        <div style="width: 473px; height: 158px;padding-top: 10px">
                            <div class="fd">
                                <div style="float:left; width: 150px;">
                                    <img src="image/target.png" width="140" style="padding-left: 10px;padding-top: 20px">
                                </div>
                                <div style="float: left;margin-top: 20px">
                                    <img src="image/efficacy.png">
                                </div>
                                <div style="float: left;width: 30px;padding-top: 15px;padding-left: 15px;font-size: 24px; color:#00ccff;">
                                    办公系统
                                </div>
                            </div>
                            <div class="fd">
                                <div style="float:left; width: 150px">
                                    <img src="image/wifi.png">
                                </div>
                                <div style="float: left;margin-top: 20px">
                                    <img src="image/efficacy.png">
                                </div>
                                <div style="float: left;width: 30px;padding-top: 15px;padding-left: 15px;font-size: 24px; color:#00ccff;">
                                    WIFI监测
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">电子围栏</div>
            <div class="swiper-slide">智慧停车</div>
            <div class="swiper-slide">河道预警</div>
            <div class="swiper-slide">票务系统</div>
            <div class="swiper-slide">视频监控</div>
            <div class="swiper-slide">环境监测</div>
            <div class="swiper-slide">危岩监测</div>
            <div class="swiper-slide">办公系统</div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <script>
        effect = 2
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            speed: 2500,
            slidesPerView: 7,
            spaceBetween: 20,
            centeredSlides : true,
            watchSlidesProgress : true,
            on: {
                setTranslate: function(){
                    slides = this.slides
                    for(i=0; i< slides.length; i++){
                        slide = slides.eq(i)
                        progress = slides[i].progress
                        slide.css({'opacity': '0.6','background': ''});slide.transform('');
                        if(effect == 1){
                            slide.transform('scale('+(1 - Math.abs(progress)/8)+')');
                        }else if(effect == 2){
                            slide.css({'opacity':(1-Math.abs(progress)/4),'width':'124px','margin':'0 20px'});
                            slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');
                        }

                    }
                },
                setTransition: function(transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                },
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        pe = document.getElementById('progressEffect');
        pe.onchange = function(){
            effect = this.value
            swiper.update();
        };
        // var inter = new Vue({
        //     el: "#app",
        //     data: {
        //         bj: '北京',
        //         sh: '上海',
        //         gz: '恩施',
        //         es: '广州',
        //         city: '',
        //         tianqisz: [],
        //     },
        //     methods: {
        //         tianqi: function (city) {
        //             var a = this;
        //             console.log(city);
        //             axios.get("https://wthrcdn.etouch.cn/weather_mini?city=" + city)
        //                 .then(function (response) {
        //                     a.tianqisz = response.data.data.forecast
        //                 }, function (err) {
        //                     console.log(err);
        //                 })
        //         }
        //     }
        // })
    </script>
    <script type="text/javascript">
        var dom = document.getElementById("one");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '车位总数',
                left:80,
                bottom:0,
                textStyle:{
                    fontSize:16,
                    color:'#00ffff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },

                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['20%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        rich: {
                            a: {
                                color: '#fff',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#fff',
                                width: '50%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 14,
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                padding: [0, 0],
                                borderRadius: 2
                            }
                        }
                    },
                    data: [
                        {value: 18, name: '已预约'},
                        {value: 22, name: '空闲中'},
                        {value: 60, name: '使用中'}
                    ]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    <script type="text/javascript">
        var dom = document.getElementById("two");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '订单总数',
                left:80,
                bottom:0,
                textStyle:{
                    fontSize:16,
                    color:'#00ffff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner'
                    },
                    labelLine: {
                        show: false
                    },

                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['20%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        rich: {
                            a: {
                                color: '#fff',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#fff',
                                width: '50%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 14,
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                padding: [0, 0],
                                borderRadius: 2
                            }
                        }
                    },
                    data: [
                        {value: 18, name: '手机H5'},
                        {value: 22, name: 'PC端'},
                        {value: 60, name: '微信端'}
                    ]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    <script type="text/javascript">
        var dom = document.getElementById("three");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告'],
                textStyle:{
                    color:'#fff',
                    fontSize:12
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['0', '4点', '8点', '12点', '16点', '20点', '24点'],
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                        fontSize:12
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                        fontSize:12
                    }
                }
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [12, 33, 29, 53, 60, 43, 21]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [20, 18, 49, 24, 29, 33,10]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [50, 23, 21, 65, 70, 30, 41]
                }
            ]
        };
        ;
        // ajax("GET","/data/asset/data/aqi-beijing.json",{},function (res) {
        //     myChart.setOption(option = {
        //         title: {
        //             text: 'Beijing AQI'
        //         },
        //         tooltip: {
        //             trigger: 'axis'
        //         },
        //         xAxis: {
        //             data: data.map(function (item) {
        //                 return item[0];
        //             })
        //         },
        //         yAxis: {
        //             splitLine: {
        //                 show: false
        //             }
        //         },
        //         toolbox: {
        //             left: 'center',
        //             feature: {
        //                 dataZoom: {
        //                     yAxisIndex: 'none'
        //                 },
        //                 restore: {},
        //                 saveAsImage: {}
        //             }
        //         },
        //         dataZoom: [{
        //             startValue: '2014-06-01'
        //         }, {
        //             type: 'inside'
        //         }],
        //         visualMap: {
        //             top: 10,
        //             right: 10,
        //             pieces: [{
        //                 gt: 0,
        //                 lte: 50,
        //                 color: '#096'
        //             }, {
        //                 gt: 50,
        //                 lte: 100,
        //                 color: '#ffde33'
        //             }, {
        //                 gt: 100,
        //                 lte: 150,
        //                 color: '#ff9933'
        //             }, {
        //                 gt: 150,
        //                 lte: 200,
        //                 color: '#cc0033'
        //             }, {
        //                 gt: 200,
        //                 lte: 300,
        //                 color: '#660099'
        //             }, {
        //                 gt: 300,
        //                 color: '#7e0023'
        //             }],
        //             outOfRange: {
        //                 color: '#999'
        //             }
        //         },
        //         series: {
        //             name: 'Beijing AQI',
        //             type: 'line',
        //             data: data.map(function (item) {
        //                 return item[1];
        //             }),
        //             markLine: {
        //                 silent: true,
        //                 data: [{
        //                     yAxis: 50
        //                 }, {
        //                     yAxis: 100
        //                 }, {
        //                     yAxis: 150
        //                 }, {
        //                     yAxis: 200
        //                 }, {
        //                     yAxis: 300
        //                 }]
        //             }
        //         }
        //     });
        // })
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    <script type="text/javascript">
        var myChart=echarts.init(document.getElementById('four'));
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['石门河', '玻璃桥', '“空中魔毯”', '垂直电梯'],
                itemWidth:0,
                right:10,
                top: 0,
                textStyle:{
                    color:'#fff',
                    fontSize:12
                }
            },
            grid: {
                top:'10%',
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['12/20', '12/21', '12/22', '12/23', '12/24', '12/25', '12/26'],
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                        fontSize:12
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine:{
                    lineStyle:{
                        color:'#fff'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: ['#003c98']
                    }
                }
            },
            series: [
                {
                    name: '石门河',
                    type: 'line',
                    symbolSize:0,
                    data: [1900, 500, 150, 500, 1400, 2000, 2100],
                    smooth:true
                },
                {
                    name: '玻璃桥',
                    type: 'line',
                    symbolSize:0,
                    data: [1700, 900, 500, 600, 700, 1200, 1400],
                    smooth:true
                },
                {
                    name: '“空中魔毯”',
                    type: 'line',
                    symbolSize:0,
                    data: [1100, 500, 700, 900, 750, 600, 900],
                    smooth:true
                },
                {
                    name: '垂直电梯',
                    type: 'line',
                    symbolSize:0,
                    data: [1400, 2000, 1900, 1800, 1900, 2300, 2100],
                    smooth:true
                }
            ]
        };
        myChart.setOption(option)
    </script>
</body>
</html>
